<ul class="breadcrumb">
    <li>
        <a href="#">用户首页</a> <span class="divider">/</span>
    </li>
    <li>
        <a href="/u/<%=user.mail%>?page=home-involve&active=nav-list-2">参与项目</a> <span class="divider">/</span>
    </li>
    <li class="active">项目ID</li>
</ul>


<div class="row" style="width: 1200px">
    <div class="span3" style="width: 270px">
        <div style="height: 35px">
            <div class="form-search input-append" style="z-index:10;padding-top:5px; background-color:#ffffff">
                <input type="text" class="span2 input-typeahead" style="width: 150px" data-provide="typeahead" data-items="10" autocomplete="off">
                <span class="add-on remove-input curse_pointer" ><i class="icon-remove"></i></span>
                <span class="add-on search-input curse_pointer" ><i class="icon-search"></i>Search</span>
            </div>
        </div>
        <div class="nav-classdiagram"  >
            <%- partial('icd-nav-classdiagram') %>
        </div>
    </div>
    <div class="span6-compact" style="width: 600px">
        <div class="span6-compact content-detail" style="position:relative;width: 600px;overflow: auto;border:2px solid #d7d7d7; -webkit-border-radius: 4px; margin: 0px -20px -0px -5px;">
            <!--%- partial('icd-content-classdiagram') %-->
            <!--%- partial('icd-content-class') %-->
            <!--%- partial('icd-content-relation') %-->
        </div>
    </div>
    <div class="span3-compact" style="width: 270px">
        <div id="recommend" class="span3-compact" style="position:relative;overflow: auto;width: 270px; border:2px solid #d7d7d7; -webkit-border-radius: 4px; margin: 0px -20px -0px -5px;">
            <%- partial('icd-recommend') %>
        </div>
    </div>
</div>

<!--other part-->
<%- partial('icd-modal') %>


<script src="/javascripts/user-involve.js"></script>
<script src="/javascripts/user-involve-function.js"></script>
<script src="/javascripts/user-involve-recommend.js"></script>
<script>
    window.onload = function(){
        //中部区域的高度设定
        var maxheightMiddle = $(window).height()-$(".navbar").height()- $(".breadcrumb").outerHeight()-40;
        $(".span6-compact").css("max-height",maxheightMiddle+'px');
        $(".span3-compact").css("max-height",maxheightMiddle+'px');
        //$(".span6-compact").css("height",maxheightMiddle+'px');
        //$(".span3-compact").css("height",maxheightMiddle+'px');

        $.ajax({
            url: '/post/data/icd',
            type: 'post',
            data: {
                id:"<%=ccd._id%>",
                user:"<%=user.mail%>"
            },
            dataType: 'json',
            async: true,
            success: function(doc){
                icd_nav_classdiagram_show(doc.icd);
            }
        });
        $.ajax({
            url: '/post/data/ccd',
            type: 'post',
            data: {id:"<%=ccd._id%>"},
            dataType: 'json',
            async: true,
            success: function(doc)
            {
                ccd = doc.ccd;
            }
        });
    };

    window.onresize = function(){
        //中部区域的高度设定
        var maxheightMiddle = $(window).height()-$(".navbar").height()- $(".breadcrumb").outerHeight()-20;
        $(".span6-compact").css("max-height",maxheightMiddle+'px');
        $(".span3-compact").css("max-height",maxheightMiddle+'px');
        //$(".span6-compact").css("height",maxheightMiddle+'px');
        //$(".span3-compact").css("height",maxheightMiddle+'px');
    };

    $(function(){
        //var m_old_active = $(".cd");
        //search顶部固定
        var navH = $(".form-search").offset().top;
        $(window).scroll(function(){
            var scroH = $(this).scrollTop()+40;

            if(scroH>=navH){
                $(".form-search").css({"position":"fixed","top":40});
            }else if(scroH<navH){
                $(".form-search").css({"position":"static"});
            }
        });

        //自动填充
        $('.input-typeahead').typeahead({
            source:function(query, process){
                //左上角search的填充
                process(source_nav);
            }
            //appendToBody : true
        });

        //search中的创建cd
        $('#create-class-modal').live("click",function(){
            //$('.nav-header-relation').before('<li name="'+item_val+'"class="class"><a href="javascript:;"><i class="icon-chevron-right "></i><i class="icon-remove-sign-right" title="点击叉号删除"></i>'+item_val+'</a></li>');
            //modal是重新请求页面的所以用ajax;
            $('#modal-create-class').children(".modal-body").children("input[type='text']").val(item_val);
            $('#modal-create-class').modal('show');
        });

        //search中的创建relation
        $('#create-relation-modal').live("click",function(){
            var relationname = item_val.split("-");
            $('#modal-create-relation').children(".modal-body").children().children(".input-1").val(relationname[0]);
            $('#modal-create-relation').children(".modal-body").children().children(".input-2").val(relationname[1]);
            $('#modal-create-relation').modal('show');
        });
        //search中清空
        $('.remove-input').live("click",function(){
            $(this).parent().children("input[type='text']").val('');
        });
        //search中搜索
        var item_val;
        $('.search-input').live("click",function(){
            item_val = $(this).parent().children("input[type='text']").val();

            var item =$(this).parent().parent().parent().children(".nav-classdiagram").children("ul").children("li[name='"+item_val+"']");
            //不知道为何会出现这个奇怪现象
            var cd_name = $(".cd").text().replace( /^[" "|"　"]*/, "");
            if(item_val === cd_name)   item = $(".cd");
            if($(item).length == 1) {
                clickOnNavItem(item);
            }
            else{
                $('#modal-create').modal('show');
            }
        });

        $('#modal-create').on('show', function () {
            var cd_name = $(".cd").text();
            //为什么不能用name?
            $("#modal-create").children(".modal-header").children("h5").text("类图"+cd_name+"未包含元素"+item_val);
            $("#modal-create").children(".modal-body").children("h3").text("是否创建"+item_val+"?");
        });
    });
</script>